<template>
  <div class="wrap">
    <div class="logo">
      <img src="../../assets/lianxi.png" alt />
    </div>
    <div class="map">
      <el-amap vid="amap" :zoom="zoom" :center="center">
          <el-amap-marker vid="component-marker" :position="center"></el-amap-marker>
      </el-amap>
    </div>
    <div class="footerInfo">
      <div class="item">
        <img src="../../assets/person.png" alt />
        <p>联系人：陈文鹏经理</p>
      </div>
      <div class="item">
        <a href="tel:17614126666">
          <img src="../../assets/phone.png" alt />
          <p>17614126666</p>
        </a>
      </div>
      <div class="item">
        <a
          href="https://uri.amap.com/marker?position=123.275169,41.792724&name=辽宁省沈阳市于洪区沈大路(8-14号)"
        >
          <img src="../../assets/address.png" alt />
          <p>辽宁省沈阳市于洪区沈大路(8-14号)</p>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zoom: 14,
      center: [123.275169, 41.792724]
    };
  },

};
</script>
<style scoped lang="scss">
.wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.logo {
  height: 15vh;
  margin-left: 0.8rem;
  display: flex;
  align-items: center;
  img {
    width: 6.8rem;
    height: 1.733333rem;
    display: block;
  }
}
.map {
  height: 60vh;
}
.footerInfo {
  background: #707070;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25vh;
  .item {
    display: flex;
    align-items: center;
    margin: 0.4rem 0;
    img {
      width: 1rem;
      height: 1rem;
      display: block;
      margin-right: 0.8rem;
      margin-left: 0.8rem;
    }
    p {
      color: #fff;
      font-size: 0.4rem;
    }
    a {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
  }
}
</style>

